<template>
  <div class="address-update">
    <form @submit.prevent="formSubmit">
      <mt-field label="收货人" v-model="addrInfo.consigneeName"></mt-field>
      <mt-field label="手机号码" v-model="addrInfo.phone"></mt-field>
      <mt-field label="所在地区" v-model="getAddr"></mt-field>
      <mt-field label="详细地址" v-model="addrInfo.other"></mt-field>
    </form>

    <div class="update-btn">
      <mt-button type="primary" @click="saveUpdate">保存修改</mt-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "AddressUpdate",
  data() {
    return {
      addrInfo: {
        id: "",
        province: "",
        city: "",
        county: "",
        town: "",
        other: "",
        phone: "",
        consigneeName: "",
      },
    };
  },
  methods: {
    formSubmit() {},
    saveUpdate() {
      this.$store.commit("updateAddr", {
        addrInfo: this.addrInfo,
        id: this.getId,
        callback: () => {
          this.$router.go(-1);
        },
      });
      this.$store.commit("saveInfo");
    },
  },
  created() {
    this.addrInfo.id = this.getId;
    this.addrInfo.province = this.getAddrItem.province;
    this.addrInfo.city = this.getAddrItem.city;
    this.addrInfo.county = this.getAddrItem.county;
    this.addrInfo.town = this.getAddrItem.town;
    this.addrInfo.other = this.getAddrItem.other;
    this.addrInfo.phone = this.getAddrItem.phone;
    this.addrInfo.consigneeName = this.getAddrItem.consigneeName;

    console.log(this.getId);
  },
  computed: {
    getId() {
      return this.$route.query.id;
    },
    getAddrItem() {
      return this.$store.state.userInfo.shippingAddrs[this.getId];
    },
    getAddr: {
      get() {
        return this.addrInfo.province + " " + this.addrInfo.city;
      },
      set(newVal) {
        this.addrInfo.county = newVal;
      },
    },
  },
};
</script>

<style scoped>
.update-btn {
  margin-top: 20px;
  padding: 0 20px;
}
.update-btn button {
  width: 100%;
}
</style>